<div>
    <header class="top">
        <aside id="income"  :class="{'activeC':active=='income'}" @click="headerClick('income')">收入</aside>
        <aside id="expenditure" :class="{'activeC':active=='expenditure'}" @click="headerClick('expenditure')">支出</aside>
    </header>
    <article class="warp">
        <div class="income" v-show="active=='income'">
            <dl class="history" v-for="info in inComeInfo">
                <dt class="fl">
                    <strong>{{info.des}}</strong><br>
                    <span>{{info.time}}</span>&nbsp;&nbsp;<span></span>
                </dt>
                <dd class="fl">+{{info.amount}}</dd>
            </dl>
        </div>
        <div class="expenditure" v-show="active=='expenditure'">
            <dl class="history" v-for="info in outInfo">
                <dt class="fl">
                    <strong>{{info.des}}</strong><br>
                    <span>{{info.time}}</span>&nbsp;&nbsp;<span></span>
                </dt>
                <dd class="fl">{{info.amount}}</dd>
            </dl>
        </div>
    </article>
</div>